import {Utils} from './common.js'

const MessagerLevel = Object.freeze({
    ERROR: 4,
    WARN: 3,
    INFO: 2,
});

class ToastMessageContent {
    constructor(msg, level = MessagerLevel.INFO) {
        this._layoutElem = Utils.CreateHTMLElement(`
<div class="toast align-items-center border-0 m-2" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide>
    <div class="d-flex">
        <div class="toast-body">${msg}</div>
    </div>
</div>`);
        switch(level) {
            case MessagerLevel.ERROR:
                this._layoutElem.classList.add('text-white', 'bg-danger');
                break;
            case MessagerLevel.WARN:
                this._layoutElem.classList.add('text-white', 'bg-warning');
                break;
            case MessagerLevel.INFO:
                this._layoutElem.classList.add('text-white', 'bg-success');
                break;
        }
        this._myToast = undefined;
        if(level > MessagerLevel.WARN) {
            this._layoutElem.querySelector('.toast-body').after(Utils.CreateHTMLElement(`<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>`));
            this._layoutElem.removeAttribute('data-bs-autohide');
            this._myToast = new bootstrap.Toast(this._layoutElem, {animation: true, autohide: false, });
        } else {
            this._myToast = new bootstrap.Toast(this._layoutElem, {animation: true, autohide: true, delay: 5000, });
        }
    }
    get layoutElem() {return this._layoutElem;}
    get toast() {return this._myToast;}
};

class _ToastMessager {
    constructor() {
        this._layoutElem = Utils.CreateHTMLElement(`<div class="position-fixed top-0 end-0 p-3" style="z-index: 11"> </div>`);
        document.body.after(this._layoutElem);
    }

    Show(msg, level = MessagerLevel.INFO) {
        let _content = new ToastMessageContent(msg, level);
        this._layoutElem.append(_content.layoutElem);
        _content.toast.show();
    }
};

class _ConfirmMessager {
    constructor() {
        this._layoutElem = Utils.CreateHTMLElement(`
<div class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
      </div>
      <div class="modal-body"> </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary">Cancel</button>
        <button type="button" id='confirm' class="btn btn-primary">Confirm</button>
      </div>
    </div>
  </div>
</div>
`);
        document.body.after(this._layoutElem);
        this._myModal = new bootstrap.Modal(this._layoutElem, {'backdrop': 'static', 'keyboard': false, 'focus': true});
    }

    Show(caption, msg, level = MessagerLevel.Info) {
        this._layoutElem.querySelector('.modal-title').innerText = caption;
        this._layoutElem.querySelector('.modal-body').innerText = msg;
        this._myModal.show();
        return new Promise((resolve, reject) => {
            const _footer = this._layoutElem.querySelector('.modal-footer');
            const _fn = (e) => {
                _footer.removeEventListener('click', _fn);
                this._myModal.hide();
                if(e.target.id === 'confirm') {
                    resolve(true);
                } else {
                    resolve(false);
                }
            };
            _footer.addEventListener('click', _fn);
        });
    }
};

const ToastMessager = new _ToastMessager();
const ConfirmMessager = new _ConfirmMessager();

export {ToastMessager, ConfirmMessager, MessagerLevel};
